<template>
    <div>
        <ul>
            <li>
                <img src="@/assets/images/14.jpg" alt="">
            </li>
            <li v-for="(item, index) in title" :key="index">
                <img :src="item.src" alt="">
                <div class="box2">
                    <h5>{{ item.name }}</h5>
                    <p>{{ item.names }}</p>
                    <div class="money">
                        <div class="moneys">
                            <span>{{ item.money }}</span>
                            <span>{{ item.page }}</span>
                            <span>{{ item.fen }}</span>
                        </div>
                        <img :src="item.img" alt="">
                    </div>
                </div>

            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
    setup() {
        const title = reactive([
            {
                id: '01',
                src: require("@/assets/images/15.jpg"),
                name: "Estee Lauder/雅诗兰黛微精华原生液200ml 肌初...",
                names: '24H发货',
                money: '￥',
                page: "529",
                fen: '/份',
                img: require("@/assets/images/18.jpg")
            },
            {
                id: '02',
                src: require("@/assets/images/16.jpg"),
                name: "宅家学做菜，西多士加拿大北极虾生虾",
                names: '24H发货',
                money: '￥',
                page: "529",
                fen: '/份',
                img: require("@/assets/images/18.jpg")
            },
            {
                id: '03',
                src: require("@/assets/images/17.jpg"),
                name: "Estee Lauder/雅诗兰黛微精华原生液200ml 肌初...",
                names: '24H发货',
                money: '￥',
                page: "529",
                fen: '/份',
                img: require("@/assets/images/18.jpg")
            },
            {
                id: '04',
                src: require("@/assets/images/15.jpg"),
                name: "曦瓜 一盏曦铭·肉桂",
                names: '24H发货',
                money: '￥',
                page: "529",
                fen: '/份',
                img: require("@/assets/images/18.jpg")
            },
            {
                id: '05',
                src: require("@/assets/images/15.jpg"),
                name: "Estee Lauder/雅诗兰黛微精华原生液200ml 肌初...",
                names: '24H发货',
                money: '￥',
                page: "529",
                fen: '/份',
                img: require("@/assets/images/18.jpg")
            },
        ])

        return {
            title
        }
    }
})
</script>

<style scoped>
ul li:first-child {
    width: 48%;
    height: 260px;
}

ul li:first-child img {
    width: 100%;
    height: 100%;
}

ul li:nth-child(3),
ul li:nth-child(5),
ul li:nth-child(7) {
    margin-top: -30px;
}

ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

ul li {
    width: 48%;
    height: 300px;
    background-color: white;
    margin: 10px 0;
    list-style-type: none;
    border-radius: 15px;
    overflow: hidden;
}

ul li img {
    width: 100%;
    height: 200px;

}

ul li .box2 {
    padding: 10px;

}

ul li p {
    height: 20px;
    width: 70px;
    border: 1px solid #77C2D7;
    color: #77C2D7;
}

ul li .money {
    display: flex;
    justify-content: space-between;
}

ul li .money .moneys {
    display: flex;
    align-items: flex-end;
}
ul li .money .moneys span:first-child{
    color: #E45930;
}
ul li .money .moneys span:nth-child(2){
    color: #E45930;
    font-size: 18px;
}
ul li .money img{
    width: 20px;
    height: 20px;
}
</style>